<template>
  <div class="app-container">
    <el-form label-position="left" ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="应用ID" prop="appId">
        <el-input :disabled="disabled" v-model="form.appId" placeholder="请输入应用ID"/>
      </el-form-item>
      <el-form-item label="应用私钥" prop="privateKey">
        <el-input :disabled="disabled" v-model="form.privateKey" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="网关地址" prop="gatewayUrl">
        <el-input :disabled="disabled" v-model="form.gatewayUrl" placeholder="请输入网关地址"/>
      </el-form-item>
      <el-form-item label="通知回调" prop="notifyUrl">
        <el-input :disabled="disabled" v-model="form.notifyUrl" placeholder="请输入异步通知地址"/>
      </el-form-item>
      <el-form-item label="授权回调" prop="returnUrl">
        <el-input :disabled="disabled" v-model="form.returnUrl" placeholder="请输入授权回调地址"/>
      </el-form-item>

      <el-form-item label="模式" prop="mode">
        <el-radio-group :disabled="disabled" v-model="form.mode">
          <el-radio
            v-for="dict in dict.type.ali_pay_type"
            :key="dict.value"
            :label="dict.value"
          >{{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <transition name="el-zoom-in-center">
        <div v-show="secretMode" class="transition-box">
          <el-form-item label="支付宝公钥" prop="publicKey">
            <el-input :disabled="disabled" v-model="form.publicKey" type="textarea" placeholder="请输入支付宝公钥"/>
          </el-form-item>
          <el-form-item label="商户号" prop="sysServiceProviderId">
            <el-input :disabled="disabled" v-model="form.sysServiceProviderId" placeholder="请输入商户号"/>
          </el-form-item>
        </div>
      </transition>
      <transition name="el-zoom-in-center">
        <div v-show="!secretMode" class="transition-box">
          <el-form-item label="应用公钥证书" prop="certPath">
            <file-upload :is-show-tip="false" v-model="form.certPath" :disabled="true" :limit="1"></file-upload>
          </el-form-item>
          <el-form-item label="支付宝公钥证书" prop="publicCertpath">
            <file-upload :is-show-tip="false" v-model="form.publicCertpath" :disabled="true" :limit="1"></file-upload>
          </el-form-item>
          <el-form-item label="支付宝根证书" prop="rootCertPath">
            <file-upload :is-show-tip="false" v-model="form.rootCertPath" :disabled="true" :limit="1"></file-upload>
          </el-form-item>
        </div>
      </transition>
    </el-form>
    <div style="display: flex;justify-content: center">
      <el-button plain v-if="showSave" icon="el-icon-check" type="success" @click="submitForm">保存</el-button>
      <el-button plain v-if="showEdit" icon="el-icon-edit" type="primary" @click="changeDisabled">修改</el-button>
      <el-button plain v-if="showTest" icon="el-icon-link" type="info" @click="handlePay">测试</el-button>
    </div>
    <el-dialog title="支付测试" :visible.sync="payOpen" width="500px" append-to-body>
      <el-form :model="payInfo" label-width="85px">
        <el-form-item label="商品名称">
          <el-input v-model="payInfo.subject" placeholder="请输入商品名称"/>
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input v-model="payInfo.totalAmount" placeholder="请输入商品价格"/>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="payInfo.body" placeholder="请输入商品描述"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-check" type="primary" @click="doPay">确认支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  toPayAsPC,
  addAliPay,
  updateAliPay,
  selectMainConfig
} from "@/api/system/ali_pay";

export default {
  name: "AliPay",
  dicts: ['ali_pay_type', "is_primary"],
  watch: {
    'form.mode': function (newValue, oldValue) {
      this.secretMode = newValue !== "2";
    }
  },
  data() {
    return {
      showSave: false,
      showEdit: false,
      showTest: false,
      disabled: true,
      payInfo: {
        outTradeNo: 1,
        body: null,
        subject: null,
        totalAmount: null,
      },
      payOpen: false,
      secretMode: true,
      // 表单参数
      form: {},
      rules: {
        appId: [
          {required: true, message: "应用ID不能为空", trigger: "blur"}
        ],
        gatewayUrl: [
          {required: true, message: "网关地址不能为空", trigger: "blur"}
        ],
        privateKey: [
          {required: true, message: "应用私钥不能为空", trigger: "blur"}
        ],
        mode: [
          {required: true, message: "加密模式必选", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.initForm()
  },
  methods: {
    initForm() {
      selectMainConfig().then(re => {
        this.form = re.data
        if (this.form.configId === null) {
          this.disabled = false
          this.showSave = true
          this.showEdit = false
          this.showTest = false
        } else {
          this.disabled = true
          this.showEdit = true
          this.showTest = true
        }
      })
    },
    changeDisabled() {
      this.disabled = false
      this.showSave = true
    },
    handlePay() {
      this.payOpen = true
    },
    doPay() {
      if (/(Android|iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // toPayAsWeb(this.payInfo).then(re => {
        //
        //   // window.location.href = re.data
        // })
      } else {
        toPayAsPC(this.payInfo).then(re => {
          window.open(re, '_blank');
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.configId != null) {
            updateAliPay(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.initForm()
              this.disabled = true
              this.showSave = false
            });
          } else {
            addAliPay(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.initForm()
              this.disabled = true
              this.showSave = false
            });
          }
        }
      });
    },
  }
};
</script>
